<style include="trusted-style common-style">
  :host {
    overflow: hidden;
  }

  iron-list {
    height: 100%;
    width: 100%;
  }

  .row {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
  }

  .row:focus-visible {
    outline: 0;
  }
</style>
<iron-list id="grid" items="[[photosByRow_]]" as="row">
  <template>
    <div class="row" rowindex$="[[index]]" tabindex$="[[tabIndex]]"
      on-focus="onGridRowFocused_" on-keydown="onGridRowKeyDown_">
      <template is="dom-repeat" items="[[row]]" as="photo">
        <wallpaper-grid-item
          class="photo"
          colindex$="[[index]]"
          image-src="[[photo.url]]"
          tabindex="-1">    
        </wallpaper-grid-item>
      </template>
    </div>
  </template>
</iron-list>
